$(document).ready(function() {
    ProgramAjaxService.upcomingPrograms(function(programs){
        var html = '';
        $.each(programs,function(){
            html = '<div data-role="collapsible" data-collapsed="true" id="program'+this.id+'">'
            +'<h3>'+ this.programStructure.name +'</h3>'
            +'<p>'+ this.programStructure.description +'</p>'
            +'<p>Start Date : ' + this.formatedDate +'</p>'
            +'<a href="" data-role="button" style="width: 100px" id="enroll-'+ this.id +'" class="enroll">Enroll</a>'
            +'</div>';
        })
        $("#upcoming-programs").html(html);
        $('#upcoming-programs').page()

        
    })
    $(".enroll").live("click",function(){
        var id = $(this).attr("id").substring(7);
        $("#program"+id).hide();
        ProgramAjaxService.enroll(id,function(){
        })
    })
});